<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="商户名称" prop="nickname">
            <el-input
              clearable
              v-model.trim="form.nickname"
              placeholder="商户名称"
              class="wid220"
            ></el-input>
          </el-form-item>

          <el-form-item label="商户状态" prop="domain_name">
            <el-select v-model="form.status" placeholder="请选择" @change="getArticleList">
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="审核状态" prop="domain_name">
            <el-select v-model="form.type" placeholder="请选择" @change="getArticleList">
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 主页面 -->
      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="listdata"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" />

          <el-table-column
            label="商户名称"
            width="130"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.nickname }}</template>
          </el-table-column>
          <!-- <el-table-column label="商户简图">
            <template slot-scope="scope">
              <div class="logo">
                <img
                  :src="scope.row.business_license"
                  alt=""
                  @click="openImg(scope.row.business_license)"
                />
              </div>
            </template>
          </el-table-column> -->
          <el-table-column
            label="商户手机号"
            prop="mobile"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="创建时间"
            prop="created_at"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="商户状态" prop="state">
            <template slot-scope="scope">
              <el-switch
                :disabled="switchState"
                v-model="scope.row.status"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="2"
                @change="changeSwitch($event, scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="商户审核状态">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.type == 0">未提交审核</el-tag>
              <el-tag type="warning" v-else-if="scope.row.type == 1"
                >待审核</el-tag
              >
              <el-tag type="success" v-else-if="scope.row.type == 2"
                >审核通过</el-tag
              >
              <el-tag type="danger" v-else-if="scope.row.type == 3"
                >审核驳回</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 1"
                :disabled="scope.row.type==2"
                @click="editAction(scope.row)"
                type="text"
                size="mini"
                class="handle_btn"
                >审核</el-button
              >
              <el-button
                v-if="scope.row.status == 2"
                disabled
                @click="editAction(scope.row)"
                type="text"
                size="mini"
                class="handle_btn"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="main_page boxdq">
        <div></div>
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="current.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
      <!-- 主页面 -->
    </div>
    <!-- 审核页面 -->
    <el-dialog
      title="商户审核"
      :visible.sync="dialogVisible"
      width="70%"
      @click="closeVisble"
    >
      <el-form
        :rules="rules"
        ref="agentForm"
        :model="agentForm"
        label-width="80px"
      >
        <el-form-item label="资质简图:">
          <div class="logo">
            <img
              :src="agentForm.business_license"
              alt=""
              @click="openImg(agentForm.business_license)"
            />
          </div>
          <!-- <img width="100%" :src="agentForm.business_license" alt="" /> -->
          <!-- <el-upload :action="uploadPath" list-type="picture-card" :data="{ store: 'saas/contract' }"
            style="min-height: 120px" :file-list="filelist" :disabled="true" :on-preview="handlePictureCardPreview">
          </el-upload> -->
          <!-- <el-dialog :visible.sync="dialogVisible1" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog> -->
        </el-form-item>
        <el-form-item label="审核状态:" prop="audit_status">
          <!-- 如果audit_status状态等于2 则显示文字审核成功 -->
          <span v-if="agentForm.type == 2">审核成功</span>
          <el-radio-group
            v-model="type"
            @change="changeAudit"
            v-if="agentForm.type != 2"
          >
            <el-radio :label="2">审核成功</el-radio>
            <el-radio :label="3">审核驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="audit_remark">
          <el-input
            v-if="agentForm.type == 2"
            readonly
            type="textarea"
            :rows="2"
            placeholder="请输入审核备注"
            :disabled="disabled"
            v-model="agentForm.audit_remark"
          >
          </el-input>
          <el-input
            v-if="agentForm.type != 2"
            type="textarea"
            :rows="2"
            placeholder="请输入审核备注"
            :disabled="disabled"
            v-model="agentForm.audit_remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="sublemt"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 审核页面 -->

    <el-dialog :visible.sync="imageVialog" width="50%">
      <div style="text-align: center; padding: 50px">
        <img style="width: 100%; height: 500px" :src="openImgSrc" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadPath } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { Debounce } from "@/utils/index";
import { deepClone } from "@/utils";
import {
  // 查询商户列表
  getMerchantApi,
  // 根据商户id查询商户详情
  getMerchantIdApi,
  // 审核
  changeOperate,
} from "@/api/merchant/index";
export default {
  name: "advertisement",
  data() {
    return {
      uploadPath,
      form: {
        // 商户名称
        company_name: "",
        // 广告状态
        domain_name: "",
        status: "",
        type: "",
      },
      type: "",
      statusList: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "1",
          label: "有效",
        },
        {
          value: "2",
          label: "冻结",
        },
      ],
      typeList: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "0",
          label: "未提交审核",
        },
        {
          value: "1",
          label: "待审核",
        },
        {
          value: "2",
          label: "已审核",
        },
        {
          value: "3",
          label: "已驳回",
        },
      ],
      userType: [
        {
          name: "开启",
          id: 1,
        },
        {
          name: "关闭",
          id: 2,
        },
      ],

      // 加载功能
      listLoading: false,
      // 列表字段
      list: [],
      // 列表字段复制
      listdata: [],

      // 开关的状态
      switchState: false,

      // 分页
      current: {
        page: 1,
        limit: 10,
      },
      totalCount: 0,

      // 校验规则
      rules: {
        // audit_remark: [
        //   { required: true, message: "请输入审核备注", trigger: "blur" },
        // ],
        type: [
          { required: true, message: "请选择审核状态", trigger: "change" },
        ],
      },
      // 新增的模态框
      dialogVisible: false,
      // 新增的表单信息
      agentForm: {},

      // 查看已上传的图片二级模态框
      dialogVisible1: false,
      // 查看已上传的图片链接
      dialogImageUrl: null,

      filelist: [],
      disabled: false,

      // 模态框展示的图片链接
      openImgSrc: null,
      // 模态框
      imageVialog: false,

      // 审核时的商户id
      id: null,
    };
  },
  created() {
    // this.getMerchantList();
  },
  methods: {
    // 获取学校列表
    getMerchantList() {
      this.listLoading = true;
      let data = {
        page: this.current.page,
        page_size: this.current.limit,
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data,this.form)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data,
        this.form
      );
      getMerchantApi(query).then((res) => {
        if (res.errcode == 0) {
          this.listLoading = false;
          this.list = res.data.list;
          this.listdata = res.data.list;
          this.totalCount = res.data.count;
        } else {
          this.$message.error(res.errmsg);
          this.listLoading = false;
        }
      });
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.form.company_name = "";
      this.form.status = "";
      this.form.type = "";

      this.getMerchantList();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.getMerchantList();
    },
    // 多选
    handleSelectionChange() {},

    // 审核
    editAction(row) {
      this.type = "";
      this.agentForm = deepClone(row);
      this.dialogVisible = true;
    },
    // 切换审核状态
    changeAudit(e) {
      if (e == 2) {
        this.$nextTick(() => {
          this.rules.audit_remark = [];
        });
      } else {
        this.$nextTick(() => {
          this.rules.audit_remark = [
            { required: true, message: "请输入审核备注", trigger: "blur" },
          ];
        });
      }
    },
    // 切换分页大小
    changeLimit(e) {
      this.current.limit = e;
      this.getMerchantList();
    },
    // 切换分页
    changePage(e) {
      this.current.page = e;
      this.getMerchantList();
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url;
      this.dialogVisible1 = true;
    },
    // 移除文件时的钩子
    handleRemove() {},

    // 表单提交
    sublemt: Debounce(function () {
      if (this.agentForm.type == 0) {
        this.$message.error("用户还没提交审核资料");
        return;
      }
      if (this.agentForm.type == 2) {
        this.$message.success("用户已审核");
        this.dialogVisible = false;
        return;
      }
      if (!this.type) {
        this.$message.error("请选择审核状态");
        return;
      }
      // 如果type=3 并且没有填写原因 提示他填写原因
      if (this.type == 3 && !this.agentForm.audit_remark) {
        this.$message.error("请填写审核备注");
        return;
      }
      // 如果type=2 就是审核成功 =3 就是审核驳回
      let msg = this.type == 2 ? "审核成功" : "审核驳回";

      this.$confirm("确认" + msg, "确认", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "info ",
      })
        .then(async () => {
          this.agentForm.type = this.type;
          this.$refs.agentForm.validate((valid) => {
            if (valid) {
              this.disabled = true;
              let data = {
                type: this.agentForm.type,
                audit_remark: this.agentForm.audit_remark,
                action: "audit",
                id: this.agentForm.id,
              };
              let query = Object.assign(
                {
                  sign: Md5(
                    objKeySort(Object.assign(apiUrl().name, data)) +
                      apiUrl().appsecret
                  ),
                },
                apiUrl().name,
                data
              );
              changeOperate(query).then((res) => {
                if (res.errcode == 0) {
                  this.$message.success(res.errmsg);
                  this.dialogVisible = false;
                  this.disabled = false;
                  this.closeVisble();
                  this.getMerchantList();
                } else {
                  this.$message.error(res.errmsg);
                  this.disabled = false;
                }
              });
            } else {
              return;
            }
          });
        })
        .catch((err) => {
          console.error(err);
        });
    }),
    // 关闭模态框
    closeVisble() {
      this.$refs.agentForm.resetFields();
      this.filelist = [];
    },
    // 打开缩略图
    openImg(src) {
      this.openImgSrc = src;
      this.imageVialog = true;
    },
    changeSwitch: Debounce(function (e, row) {
      this.switchState = true;
      let data = {
        action: "uptown",
        id: row.id,
        status: e,
      };
      let param = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      changeOperate(param).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("修改成功");
          this.switchState = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    }),
  },
};
</script>

<style lang="scss" scoped>
.maincl {
  .more {
    margin-left: 50px;
  }

  .handle_btn {
    padding: 0;
    border: 0;
  }

  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    width: 100%;
  }

  .logo {
    min-width: 100px;
    width: 100px;
    height: 67px;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .logoStyle::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }

  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }

      &.hover-row > td {
        background: none !important;
      }

      .current-row > td {
        background: none !important;
      }
    }
  }

  /deep/.main_table .el-table--small td .cell {
    height: auto !important;
  }

  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }

  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }

  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table .cell {
    display: flex;
    align-items: center;
  }

  /deep/.boxdq {
    justify-content: flex-end;
  }
}

.exptitle {
  padding: 10px 0px;
}
</style>